import React from "react"
import QR from "query-string"
import { Getmv, Mvcomment } from "../api/index"
import mvStyle from "./slide.module.css"
import { withRouter } from "react-router-dom"

@withRouter
class Jumpmv extends React.Component {
    constructor() {
        super()
        this.state = {
            jumpmvArr: {},
            jumpmvUrl: '',
            mvcommentArr: []
        }
    }
    componentDidMount() {
        let { search } = this.props.location
        let queryRes = QR.parse(search)
        Getmv(queryRes.id)
            .then(body => body.json())
            .then(res => {
                this.setState({
                    jumpmvArr: res.data,
                    jumpmvUrl: res.data.brs[240]
                })
                //获取评论信息
                let { id } = res.data
                Mvcomment(id)
                    .then(body => body.json())
                    .then(res => {
                        this.setState({
                            mvcommentArr: res.comments
                        })
                    })
            })
    }
    goback() {
        this.props.history.go(-1)
    }
    render() {
        return (
            <div style={{zIndex:5}}>
                <div className={mvStyle.mvtop}>
                    <img src={require('../../../static/img/back.png')} style={{ width: "20px", height: "20px", paddingLeft: "10px", paddingTop: "2px", display: "block", zIndex: '10' }} alt="" onClick={this.goback.bind(this)} />
                </div>
                <video src={this.state.jumpmvUrl} controls preload="auto" style={{ width: "100%" }}></video>
                <h2 style={{ paddingLeft: "20px" }}>{this.state.jumpmvArr.name}</h2>
                <h4 style={{ paddingLeft: "20px", color: '#999' }}>{this.state.jumpmvArr.playCount} 次观看</h4>
                <div className={mvStyle.mvdesc}>
                    <img src={require('../../../static/img/like.png')} alt="" />
                    <img src={require('../../../static/img/comment.png')} alt="" />
                    <img src={require('../../../static/img/talk.png')} alt="" />
                    <img src={require('../../../static/img/share.png')} alt="" />
                </div>
                <hr />
                <div className={mvStyle.mvsinger}>
                    <div style={{display:"flex"}}>
                        <img src={this.state.jumpmvArr.cover} alt="" style={{ width: "40px", height: "40px", borderRadius: "50%" }} />
                        <b style={{alignSelf:"center",paddingLeft:"10px"}}>{this.state.jumpmvArr.artistName}</b>
                    </div>
                    <div className={mvStyle.collsinger}>
                        <span>+收藏</span>
                    </div>
                </div>
                <h2 style={{ paddingLeft: "20px" }}>最新评论 <span style={{ color: "#999" }}>{this.state.mvcommentArr.length}</span></h2>                
                    <ul style={{ listStyle: "none", paddingLeft: "0" ,zIndex:2}}>
                        {this.state.mvcommentArr.map((item, index) =>
                            <li key={index}>
                                <div style={{paddingLeft:"20px",display:"flex"}}>
                                <img src={item.user.avatarUrl} alt="" style={{width:"40px",height:"40px",borderRadius: "50%"}}/>
                                <b style={{color:"#00f",alignSelf:"center",paddingLeft:"10px"}}>{item.user.nickname}</b>
                                </div>
                                <span style={{marginLeft:"60px"}}>"{item.content}"</span>
                                <hr />
                            </li>
                        )}
                    </ul>               
            </div>
        )
    }
}
export default Jumpmv